<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>Map with jQuery UI Bootstrap</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta name="description" content="A preview of the jQuery UI Bootstrap theme.">
            <meta name="author" content="Addy Osmani">

            <!-- Le styles -->
			<!-- Use the raw LESS for debugging purposes -->
			<!-- <link rel="stylesheet/less" href="../../less/style.less">
			<script src="../../assets/js/vendor/less-1.4.2.min.js"></script> -->
			<!-- for PROD use the compiled CSS -->
			<link type="text/css" href="../../less/style.min.css" rel="stylesheet" />
            <link rel="stylesheet" href="../../assets/css/font-awesome.min.css">
            <!--[if IE 7]>
            <link rel="stylesheet" href="../../assets/css/font-awesome-ie7.min.css">
            <![endif]-->
            <!--[if lt IE 9]>
            <link rel="stylesheet" href="../../css/custom-theme/jquery.ui.1.10.3.ie.css">
            <![endif]-->
            <link rel="stylesheet" href="../../assets/css/docs.css">
            <link rel="stylesheet" href="../../assets/js/google-code-prettify/prettify.css">

            <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
		    <!--[if lt IE 9]>
		      <script src="../../assets/js/vendor/html5shiv.js" type="text/javascript"></script>
		      <script src="../../assets/js/vendor/respond.min.js" type="text/javascript"></script>
		    <![endif]-->

            <!-- Le fav and touch icons -->
            <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../assets/ico/apple-touch-icon-144-precomposed.png">
            <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../assets/ico/apple-touch-icon-114-precomposed.png">
            <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../assets/ico/apple-touch-icon-72-precomposed.png">
            <link rel="apple-touch-icon-precomposed" href="../../assets/ico/apple-touch-icon-57-precomposed.png">
            <link rel="shortcut icon" href="../../assets/ico/favicon.png">
            <!-- googlemap -->
            <script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=weather" type="text/javascript"></script>
            <!-- End googlemap -->
        </head>

        <body data-spy="scroll" data-target=".bs-docs-sidebar" data-twttr-rendered="true">

        <!-- Navbar
        ================================================== -->
<header class="navbar navbar-inverse navbar-fixed-top">
                <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
            <a class="navbar-brand" href="http://github.com/addyosmani/jquery-ui-bootstrap">jQuery UI Bootstrap</a>
        </div>
        <nav class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                            <li>
                                <a href="./index.html">Home</a>
                            </li>
                            <li>
                                <a href="./components.html">Components</a>
                            </li>
                            <li>
                                <a href="./extra.html">Extra</a>
                            </li>
                            <li class="active">
                                <a href="./map.html">Map</a>
                            </li>
                            <li>
                                <a href="http://github.com/addyosmani/jquery-ui-bootstrap/issues">Feedback/Issues</a>
                            </li>
                            <li>
                                <a href="http://twitter.com/addyosmani">Contact</a>
                            </li>
                            <li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">
									Switch Theme <b class="caret"></b>
								</a>
								<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
									<li><a tabindex="-1" href="../../index.html">Default Bootstrap Theme (Non LESS'd)</a></li>
									<li><a tabindex="-1" href="../united/index.html">United Theme via Bootswatch (LESS'd)</a></li>
									<li><a tabindex="-1" href="./index.html">Default Bootstrap Theme (LESS'd)</a></li>
								</ul>
                            </li>
                        </ul>
            <div id="twitter-share" class="navbar-right">
                            <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://addyosmani.github.com/jquery-ui-bootstrap/" data-text="A new jQuery UI Bootstrap theme" data-via="addyosmani" data-size="large">Tweet</a>
                            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
                        </div>
        </nav>
                    </div>
</header>


        <!-- Subhead
        ================================================== -->
<header class="bs-header" id="overview">
            <div class="container">
                <h1>jQuery UI Bootstrap</h1>
        <p class="lead">A Bootstrap-themed kickstart for jQuery UI widgets (v1.0 alpha).</p>
            </div>
        </header>


<div class="container" id="layout">
        <!-- Docs nav ================================================== -->
        <div class="row">
    <div class="col-lg-3 col-sm-3" id="sidebar">
        <div class="bs-sidebar hidden-print" role="complementary">
            <ul class="nav bs-sidenav">
                <li><a href="#block-map"><i class="icon-chevron-right"></i> Map</a></li>
                <li><a href="#block-accordion"><i class="icon-chevron-right"></i> Accordion</a></li>
                <li><a href="#block-tabs"><i class="icon-chevron-right"></i> Tabs</a></li>
            </ul>
        </div>
    </div>
    <div class="col-lg-9 col-sm-9" id="article">
            <section id="block-map">
                <div class="page-header">
                    <h1>Demo map</h1>
                </div>
                    <p class="docs-lead">
                        <a href="http://www.gmap3.net">GMap3</a> allows you to finely manipulate yours markers and others objects, to associate custom data usable in each event.
                        <br />This is an example of using jQuery UI Bootstrap with <a href="http://www.gmap3.net">gmap3</a>.
                    </p>
            </section>

            <!-- Accordion gmap3 ================================================== -->
            <section id="block-accordion">
                <div class="page-header">
                    <h1>Accordion</h1>
                </div>
                <div id="gmap3" class="col-lg-5 col-sm-5"></div>
                <div class="col-lg-7 col-sm-7">
                        <div id="accordion-map">
                        <h3>Paris</h3>
                            <div>
                                <p>
                                    Paris is the capital and largest city of France.  <br />
                                    It is situated on the river Seine, in northern France, at the heart of the Île-de-France region.  <br />
                                    The city of Paris, within its administrative limits (the 20 arrondissements), has a population of about 2,230,000.  <br />
                                    Its metropolitan area is one of the largest population centres in Europe, with more than 12 million inhabitants.
                                    <br /><br />
                                    <a href="http://en.wikipedia.org/wiki/Paris" target="_blank">Paris on Wikipedia</a>
                                </p>
                            </div>
                        <h3>Poitiers</h3>
                            <div>
                                <p>
                                    Poitiers is a city on the Clain river in west central France.  <br />
                                    It is a commune and the capital of the Vienne department and of the Poitou-Charentes region.  <br />
                                    The centre is picturesque and its streets are interesting for predominant remains of historical architecture, especially from the Romanesque period.  <br />
                                    Two major military battles occurred near the city: in 732, the Battle of Poitiers (also known as the Battle of Tours), in which the Franks commanded by Charles Martel halted the expansion of the Umayyad Caliphate, and in 1356, the Battle of Poitiers, a key victory for English forces during the Hundred Years' War.
                                    <br /><br />
                                    <a href="http://en.wikipedia.org/wiki/Poitiers" target="_blank">Poitiers on Wikipedia</a>
                                </p>
                            </div>
                        <h3>Perpignan</h3>
                            <div>
                                <p>
                                    Perpignan is a city, a commune and the capital of the Pyrénées-Orientales department in southern France.  <br />
                                    Perpignan was the capital of the former province and county of Roussillon (Rosselló in Catalan) and continental capital of the Kingdom of Majorca in the 13th and 14th centuries. <br />
                                    As of 2009, Perpignan had 120,100 inhabitants (Perpignanais, Perpinyanés) in the city proper. The metropolitan area has a total population of 300,221 in 2009.
                                    <br /><br />
                                    <a href="http://en.wikipedia.org/wiki/Perpignan" target="_blank">Perpignan on Wikipedia</a>
                                </p>
                            </div>
                        </div>
                    </div>
                <div class="clearfix"></div>
                <br />
<pre class="prettyprint linenums">
function selectCity(index, updateAccordion) {
    if (updateAccordion) {
        $( "#accordion-map" ).accordion("option", "active", index);
    }
    $('#gmap3').gmap3({
        exec: {
            name: "marker",
            all:"true",
            func: function(value){
                // data.object is the google.maps.Marker object
                if (value.data.index === index) {
                    value.object.setIcon("http://maps.google.com/mapfiles/marker_green.png");
                } else {
                    value.object.setIcon("http://maps.google.com/mapfiles/marker.png");
                }
            }
        }
    });
}
$(function(){
    //##### Accordion with gmap3

    $( "#accordion-map" ).accordion({
        header: "h3",
        activate: function(event, ui) {
            // index / 2 because of the 2 elements by set (h3 + div)
            selectCity(ui.newHeader.index() / 2);
        }
    });

    $('#gmap3').gmap3({
        map:{
            options:{
                center:[46.578498,2.457275],
                zoom: 5
            }
        },
        marker:{
            values:[
                {latLng:[48.8620722, 2.352047], data: {index: 0},
                    options:{icon: "http://maps.google.com/mapfiles/marker_green.png"}
                },
                {address:"86000 Poitiers, France", data: {index: 1}},
                {address:"66000 Perpignan, France", data: {index: 2}}
            ],
            options:{
                draggable: false
            },
            events:{
                click: function (marker, event, context) {
                    selectCity(context.data.index, true);
                }
            }
        }
    });
});
</pre>
            </section>
            <!-- Tabs gmap3 ================================================== -->
            <section id="block-tabs">
                <div class="page-header">
                    <h1>Tabs</h1>
                </div>
                    <div id="tabs">
                        <ul>
                            <li><a href="#classic">Classic</a></li>
                            <li><a href="#weather">Weather</a></li>
                            <li><a href="#tabs-3">Text</a></li>
                        </ul>
            <div id="classic" class="col-lg-12 col-sm-12 gmap3"></div>
            <div id="weather" class="col-lg-12 col-sm-12 gmap3"></div>
                        <div id="tabs-3">
                            <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
                            <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
                        </div>
                    </div>
        <div class="clearfix"></div>
<pre class="prettyprint linenums">
// invoque google maps on 2 divs
$(".gmap3").gmap3({
    map: {
        options: {
            zoom: 6,
            center: [49.265984, -123.127491],
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
    }
});

// Append the meteo layer on weather map
var map = $("#weather").gmap3("get");

var weatherLayer = new google.maps.weather.WeatherLayer({
    temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT
});
weatherLayer.setMap(map);

var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);


// force maps to refresh on show
$("#tabs").tabs({
    activate: function(event, ui) {
        if (ui.newPanel.hasClass("gmap3")) {
            ui.newPanel.gmap3({trigger: "resize"});
        }
    }
});
</pre>
            </section>
        </div>
    </div>
</div>

<!-- Footer
================================================== -->
<footer class="bs-footer">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-sm-3">
            <h3><span class="icon-envelope"></span> Contact</h3>
            <ul class="icons">
              <li><i class="icon-link"></i> Blog: <a class="targetblank" href="http://addyosmani.com/blog/">Addy Osmani</a></li>
              <li><i class="icon-twitter"></i> Twitter: <a class="targetblank" href="https://twitter.com/addyosmani">@addyosmani</a></li>
              <li><i class="icon-github"></i> Github: <a class="targetblank" href="https://github.com/addyosmani/jquery-ui-bootstrap/issues?state=open">Issues</a></li>
            </ul>
          </div>
            <div class="col-lg-4 col-sm-4">
                <h3><span class="icon-group"></span> Team</h3>
                <ul class="list-unstyled">
                    <li>Lead Product Developer : <a class="targetblank" href="http://addyosmani.com/blog/" hreflang="en">Addy Osmani</a></li>
                    <li>Chief Maintainer : <a class="targetblank" href="http://blog.aurelien-gerits.be" hreflang="fr">Aurélien Gérits</a></li>
                </ul>
            </div>
            <div class="col-lg-5 col-sm-5">
                <h3><span class="icon-lightbulb"></span> Credits</h3>
                <ul class="list-unstyled">
                    <li>jQuery UI Bootstrap &copy; <strong class="text-info">Addy Osmani</strong> 2012 - 2013.</li>
                    <li>Bootstrap &copy; <strong class="text-info">Twitter, Inc.</strong> 2012 - 2013</li>
                </ul>
            </div>
          </div>
        </div>
</footer>
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/vendor/jquery-1.9.1.min.js"></script>
<script src="../../assets/js/vendor/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="../../assets/js/vendor/bootstrap.js"></script>
<script src="../../assets/js/vendor/holder.js"></script>
<script src="../../assets/js/vendor/jquery-ui-1.10.3.custom.min.js"></script>
<script src="../../assets/js/google-code-prettify/prettify.js"></script>
<script src="../../assets/js/docs.js"></script>
<!--gmap3-->
<script src="../../third-party/gmap3/gmap3.min.js" type="text/javascript"></script>
<!--End gmap3-->
<script src="../../assets/js/demo-map.js"></script>
</body>
</html>